<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="formModel" label-width="100px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="角色名称:" prop="roleName">
            <el-input v-model="formModel.roleName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色权限:" prop="menuId">
            <el-tree
              :data="menuOptions"
              show-checkbox
              ref="menu"
              node-key="menuId"
              empty-text="暂无数据"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'RoleMnt',
  props: ['pageType', 'editData'],
  data() {
    return {
      menuOptions:[],
      formModel: {
        roleId: '',
        roleName: '',
        menuIdList:[]
      },
      defaultProps: {
        children: "children",
        label: "menuName"
      },
      rules: {
      }
    }
  },
  computed: {},
  mounted() {
    this.init()
    this.getMenuTree()
  },
  methods: {
    getMenuTree(){
      const param = {pageNum:1,pageSize:9999}
      param.isDelete = '0'
      this.get('/menu/queryMenus', param).then(res => {
        this.menuOptions = res.list
        if(this.pageType ==='edit'){
          //查拥有的权限菜单并默认选中
          const param1 = {}
          param1.roleId = this.formModel.roleId
          this.post('/role/getRoleMenuIdList', param1).then(ret => {
            this.$nextTick(() => {
              this.$refs.menu.setCheckedKeys(ret);
            });
          });
        }
      })
    },
    init() {
      this.$form = this.$refs.form
      const { pageType, editData, formModel } = this
      if (pageType === 'edit') {
        this.assignData(editData, formModel)
      }
      this.initRules()

    },
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        // menuId: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }],
        roleName: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { pageType, formModel } = this
          formModel.menuIdList = this.getMenuAllCheckedKeys();
          if (formModel.menuIdList.length == 0) {
            this.$message.warning('请配置该角色拥有的菜单权限!')
            return false
          }
          const param = { ...formModel }
          const operateType = pageType === 'edit' ? '02' : '01'
          param.operateType = operateType
          const url = '/role/maintainRoleInfoTbl'
          const tip = pageType === 'edit' ? '修改成功！' : '新增成功！'
          this.post(url, param).then(res => {
            this.$info(tip, () => {
              this.$emit('mntSuc', res)
              this.closeDialog()
            })
          })
        }
      })
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-input--medium {
    width: 50%;
  }
</style>
